<script setup>
import { ref } from 'vue'
import { Plus, Edit, Delete } from '@element-plus/icons-vue'
import { reqGetCategory1, reqGetCategory2, reqGetCategory3, reqGetAttrList, reqAddAttr, reqDeleteAttr } from '@/api/brand'

const formInline = ref({
  oneregion: '',
  towregion: '',
  threeregion: '',
})
// 一级分类数据
const category1s = ref([])
const category2s = ref([])
const category3s = ref([])
const attrList = ref([])
// 获取一级分类数据
const getCategory1 = async () => {
  const res = await reqGetCategory1()
  if (res.code === 200) {
    category1s.value = res.data
  }
}
getCategory1()
const towDisabled = ref(true)
const threeDisabled = ref(true)
// 监听一级分类
const handerChangeOne = async () => {
  const res = await reqGetCategory2(formInline.value.oneregion)
  if (res.code === 200) {
    category2s.value = res.data
    towDisabled.value = false
  }
}
// 监听二级分类
const handerChangeTow = async () => {
  const res = await reqGetCategory3(formInline.value.towregion)
  if (res.code === 200) {
    category3s.value = res.data
    threeDisabled.value = false
  }
}
// 监听三级分类
const handerChangeThree = async () => {
  const res = await reqGetAttrList(formInline.value.oneregion, formInline.value.towregion, formInline.value.threeregion)
  if (res.code === 200) {
    attrList.value = res.data
  }
}
const form = ref({
  id: '',
  attrName: '',
  attrValueList: [],
})
const status = ref(true)
// 新增
const handleAdd = () => {
  form.value = {
    id: '',
    attrName: '',
    attrValueList: [],
  }
  status.value = false
}
// 新增属性值
const handleAddAttrValue = () => {
  form.value.attrValueList.push({
    valueName: '',
  })
}
// 删除新增中的属性值
const handleDeleteAttrValue = async ($index, row) => {
  form.value.attrValueList.splice($index, 1)
}
// 保存新增
const handleSave = async () => {
  const res = await reqAddAttr({
    attrName: form.value.attrName,
    attrValueList: form.value.attrValueList,
    categoryId: formInline.value.threeregion,
    categoryLevel: 3,
    id: form.value.id,
  })
  if (res.code === 200) {
    handerChangeThree()
    ElMessage.success('保存成功')
    status.value = true
  }
}
// 删除
const handleDelete = async (row) => {
  const res = await reqDeleteAttr(row.id)
  if (res.code === 200) {
    ElMessage.success('删除成功')
    handerChangeThree()
  } else {
    ElMessage.error(res.data)
  }
}
// 修改
const handleEdit = (row) => {
  status.value = false
  form.value.attrName = JSON.parse(JSON.stringify(row.attrName))
  form.value.attrValueList = JSON.parse(JSON.stringify(row.attrValueList))
  form.value.id = JSON.parse(JSON.stringify(row.id))
}
</script>

<template>
  <el-card>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="一级分类">
        <el-select v-model="formInline.oneregion" placeholder="请选择一级分类" @change="handerChangeOne">
          <el-option v-for="item in category1s" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select v-model="formInline.towregion" placeholder="请选择二级分类" :disabled="towDisabled"
          @change="handerChangeTow">
          <el-option v-for="item in category2s" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select v-model="formInline.threeregion" placeholder="请选择三级分类" :disabled="threeDisabled"
          @change="handerChangeThree">
          <el-option v-for="item in category3s" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card style="margin-top: 20px;">
    <div v-if="status">
      <div class="btn"> <el-button type="primary" :icon="Plus" @click="handleAdd"
          :disabled="!formInline.threeregion">添加品牌</el-button></div>
      <el-table :data="attrList" border style="width: 100%">
        <el-table-column type="index" label="序号" width="100" align="center">
        </el-table-column>
        <el-table-column prop="attrName" label="属性名称" width="auto"> </el-table-column>
        <el-table-column label="属性值名称" width="width">
          <template #default="{ row }">
            <div style="display: flex;gap: 0 10px;"> <el-tag type="warning" v-for="item in row.attrValueList"
                :key="item.id">{{ item.valueName }}</el-tag></div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button size="large" type="primary" :icon="Edit" circle @click="handleEdit(row)" />
            <el-popconfirm title="确认删除吗？" @confirm="handleDelete(row)">
              <template #reference>
                <el-button size="large" type="danger" :icon="Delete" circle />
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-else>
      <el-form :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item label="属性名称">
          <el-input v-model="form.attrName" placeholder="请输入属性名称" />
        </el-form-item>
      </el-form>
      <div class="btn">
        <div class="btn"> <el-button type="primary" :icon="Plus" @click="handleAddAttrValue">添加属性值</el-button>
        </div>
      </div>
      <el-table :data="form.attrValueList" border style="width: 100%">
        <el-table-column type="index" label="序号" width="100" align="center"> </el-table-column>
        <el-table-column label="属性值名称" width="auto">
          <template #default="{ row }">
            <el-input v-model="row.valueName" placeholder="请输入属性值名称" />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ $index, row }">
            <el-button type="danger" :icon="Delete" circle @click="handleDeleteAttrValue($index, row)" />
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px;">
        <el-button type="primary" @click="handleSave">保存</el-button>
        <el-button type="primary" @click="status = true">取消</el-button>
      </div>
    </div>
  </el-card>
</template>

<style scoped lang="scss">
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

.btn {
  margin-bottom: 20px;
}
</style>